<script setup>
import { reactive, ref, onMounted, computed } from 'vue'
import { createRequestAPI } from '@/api/common'
import { getActivityDetailAPI } from '@/api/active'
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

/**
 * 变量
 */
const popupRef = ref(null)
const form = reactive({
  reqType: '4',
  reqUserName: '',
  reqUserPhone: '',
  reqContent: '', //表演内容
  files: '', //表演内容图片
  teamImg: '', //团队图片
  teamContent: '', //团队介绍
})

// 获取详情
const detailObj = ref({})
const peoples = ref([])
const getDetail = async (id) => {
  try {
    const res = await getActivityDetailAPI(id)
    detailObj.value = res.data
    peoples.value = res.data.users
  } catch (error) {
    const { code, msg } = error
    if (code != '401') {
      uni.showToast({ title: msg, icon: 'none' })
    }
  }
}

// 报名
const signUp = () => {
  popupRef.value.open()
}

const inputChange = () => {
  // console.log(form)
}

const change = () => {
  console.log('change')
}

// 获取表演图片
const getImage = (data) => {
  const { imageList } = data
  // console.log(imageList, '40===')
  form.files = imageList
}

// 获取团队介绍图片
const getImage2 = (data) => {
  const { imageList } = data
  console.log(imageList, '46===')
  form.teamImg = imageList
}

// 提交报名
const submitSignIn = async () => {
  console.log(form, '53===')
  const res = await createRequestAPI(form)
  await uni.showToast({ title: '报名成功', icon: 'none' })
  popupRef.value.close()
}

onMounted(() => {
  form.reqUserName = memberStore.profile?.nickName
  form.reqUserPhone = memberStore.profile?.phonenumber
  getDetail('A_202410301023189988')
})
</script>

<template>
  <view class="live-show">
    <view class="header-view">
      <view class="mask"></view>
      <image
        class="big-bg"
        :src="`${IMAGE_URL}${detailObj.acCover}`"
        mode="aspectFill"
      />
      <view class="small-view">
        <image
          class="small-bg"
          :src="`${IMAGE_URL}${detailObj.acCover}`"
          mode="aspectFill"
        />
        <view class="title">节日live show</view>
      </view>
    </view>
    <view class="detail">
      <view>
        <view class="title"> 时间 </view>
        <view class="content time"
          >{{ detailObj.acBegin }}-{{ detailObj.acEnd }}</view
        >
      </view>
      <view>
        <view class="title"> 活动地点 </view>
        <view class="content">
          {{ detailObj.acAddress }}
        </view>
      </view>
      <view>
        <view class="title"> 活动简介 </view>
        <!-- <view class="content">
          节日LIVE
          由节日大道多个商圈共建，打造出不同特色的LIVE舞台，超燃、超嗨、超带感...每个舞台都氛围感满满！结合四大主题：“青春”“国潮”“国际”“传承”
          ，打造多元多彩、全民参与的狂欢盛宴，无论你喜欢何种风格的表演，都能在这里找到契合的夏日节拍。在这里，你可以是观众席的参与者，更可以“原地出道”，成为带给大家快乐的表演者。
        </view> -->
        <rich-text :nodes="detailObj.acDescrip"></rich-text>
      </view>
      <view>
        <view class="title"> 活动招募 </view>
        <!-- <rich-text :nodes="detailObj.acDescrip"></rich-text> -->
        <view class="content">{{ detailObj.acTheme }}</view>
      </view>
      <!-- <image
        class="content-image"
        src="https://img.js.design/assets/img/66b8d3866f38077bbbb02cfa.png#f57905b7cf078706c95b776e944090f2"
        mode="aspectFill"
      /> -->
    </view>
    <!-- 底部按钮 -->
    <view
      class="footer flex-center"
      :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"
    >
      <view class="share-view">
        <button open-type="share" plain>
          <view class="share flex-center">
            <image src="@/static/images/active/share.png" mode="aspectFill" />
          </view>
          <view class="share-text">分享</view>
        </button>
      </view>
      <view @tap="signUp" class="btn flex-center">报名</view>
    </view>
    <!-- 底部弹窗 -->
    <uni-popup
      ref="popupRef"
      type="bottom"
      background-color="#fff"
      borderRadius="60rpx 60rpx 0 0"
      @change="change"
    >
      <scroll-view scroll-y="true" class="popup-content">
        <view class="item">
          <view class="label">地点</view>
          <view class="address limit">{{ detailObj.acAddress }}</view>
        </view>
        <view class="item">
          <view class="label">姓名</view>
          <input
            disabled
            v-model="form.reqUserName"
            placeholder="请输入您的姓名"
            placeholder-class="input-placeholder"
            @input="inputChange('name')"
          />
        </view>
        <view class="item">
          <view class="label">手机号</view>
          <input
            disabled
            v-model="form.reqUserPhone"
            placeholder="请输入您的手机号"
            placeholder-class="input-placeholder"
            @input="inputChange('phone')"
          />
        </view>
        <view class="textarea-title">表演内容</view>
        <view class="textarea-view">
          <textarea
            class="textarea"
            v-model="form.reqContent"
            @input="inputChange('reqContent')"
            maxlength="200"
            placeholder-style="color:#999999"
            placeholder="请介绍您的表演内容，并附属视频资料或链接"
          />
          <view class="count">({{ form.reqContent.length }}/200)</view>
          <easy-upload @change="getImage" />
        </view>
        <view class="textarea-title">团队介绍</view>
        <view class="textarea-view">
          <textarea
            class="textarea"
            v-model="form.teamContent"
            @input="inputChange('teamContent')"
            maxlength="200"
            placeholder-style="color:#999999"
            placeholder="请填写您的团队成员，并附上真实的身份证明"
          />
          <view class="count">({{ form.teamContent.length }}/200)</view>
          <easy-upload @change="getImage2" />
        </view>
        <view @tap="submitSignIn" class="btn flex-center item-btn">报名</view>
      </scroll-view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
.live-show {
  position: relative;
  height: 100vh;
  .header-view {
    position: relative;
    height: 500rpx;
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(3px);
    }
    .big-bg {
      width: 100%;
      height: 100%;
    }
    .small-view {
      position: absolute;
      z-index: 9;
      top: 100rpx;
      left: 54rpx;
      display: flex;
      .small-bg {
        width: 242rpx;
        height: 342rpx;
        border-radius: 24rpx;
        flex-shrink: 0;
        margin-right: 32rpx;
      }
      .title {
        margin-top: 70rpx;
        width: 320rpx;
        font-size: 34rpx;
        letter-spacing: 0px;
        line-height: 48rpx;
        color: #ffffff;
      }
    }
  }
  .detail {
    position: relative;
    background: #ffffff;
    margin-top: -100rpx;
    padding: 90rpx 52rpx 200rpx;
    border-radius: 90rpx 90rpx 0 0;
    .title {
      margin-top: 26rpx;
      margin-bottom: 8rpx;
      color: #000000;
      font-size: 32rpx;
      font-weight: 500;
    }
    .content {
      color: #333333;
      font-size: 28rpx;
      font-weight: 400;
    }
    .time {
      color: #666666;
    }
    .content-image {
      margin-top: 20rpx;
      width: 100%;
      height: 452rpx;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    padding-top: 20rpx;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 17rpx 51rpx #f5ede9;
    display: flex;
    align-items: center;
    justify-content: center;
    .share-view {
      margin-right: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      button {
        border: none;
        padding: 0;
        line-height: normal;
      }
      .share {
        width: 64rpx;
        height: 64rpx;
        background: #ea5506;
        border-radius: 50%;
        margin-bottom: 6rpx;
        image {
          width: 38rpx;
          height: 32rpx;
        }
      }
      .share-text {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}

.btn {
  width: 420rpx;
  height: 80rpx;
  border-radius: 10rpx;
  background: #ea5506;
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
}

.popup-content {
  height: 80vh;
  padding: 60rpx 52rpx 0;
  box-sizing: border-box;
  .item {
    margin-bottom: 60rpx;
    height: 94rpx;
    border-radius: 8rpx;
    background: #f4f4f4;
    padding: 0 52rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      flex-shrink: 0;
      width: 180rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #333333;
    }
    .arrow {
      width: 32rpx;
      height: 20rpx;
    }
    input {
      text-align: right;
      flex: 1;
    }
  }
  .item-btn {
    width: auto;
    margin-top: 120rpx;
  }
}

// 复选框
.textarea-title {
  font-size: 28rpx;
  font-weight: 500;
}
.textarea-view {
  margin: 28rpx 0 48rpx;
  border-radius: 16rpx;
  padding: 36rpx 28rpx;
  width: 100%;
  // height: 690rpx;
  background: #f5f5f5;
}
.textarea {
  width: 100%;
  height: 410rpx;
}
.count {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 32rpx;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
